<template>
  <div class="top_bar">
    <span v-if="barObj.isBack" @click="back">
      <i class="iconfont icon-fanhui" v-if="barObj.isBack"></i>
      <div class="txt">{{barObj.backVal}}</div>
    </span>
    <span v-else>
      <div class="txt">{{barObj.backVal}}</div>
    </span>
    <span>{{barObj.title}}</span>
    <span>
      <i v-if="!barObj.isIcon" @click="goLink" class="iconfont icon-shizhong-"></i>
    </span>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
export default {
  props: {
    barObj: {
      type: Object
    }
  },
  methods: {
    back() {
      if (this.$route.path == "/encrypted") {
        MessageBox.confirm("请确定是否已经截图保存?").then(action => {
          this.$router.go(-1);
        });
      } else {
        this.$router.go(-1);
      }
    },
    goLink() {
      this.$router.push({
        path: `${this.barObj.iconLink.path}`
      });
    }
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.top_bar {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  color: #FFF;
  line-height: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;

  // background: pink;
  span {
    flex-grow: 1;
    width: 30px;
    font-size: 15px;
    position: relative;

    .iconfont {
      font-size: 20px;
    }

    .icon-fanhui {
      position: absolute;
      line-height: 0.5rem;
      height: 0.5rem;
      left: 0;
    }

    .txt {
      position: absolute;
      left: 15px;
      top: 0;
    }
  }

  span:nth-child(2) {
    text-align: center;
    font-size: 18px;
  }

  span:nth-child(3) {
    text-align: right;
  }
}
</style>

